<!--
 * @Author: wangc
 * @Date: 2020-07-28 19:27:39
 * @LastEditTime: 2020-08-08 18:52:36
 * @Description: 
--> 
<template>
  <div id="login">
    <div class="main">
      <div class="label">Create your account</div>
      <input type="text" v-model="uid" class="input" placeholder="input account" />
      <input type="password" v-model="psd1" class="input" placeholder="input password" />
      <input type="password" v-model="psd2" class="input" placeholder="enter password" />
      <div class="button">
        <input type="button" class="back" value="Back" @click="goBack" />
        <input type="button" class="register" value="Register" @click="register" />
      </div>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      uid: "",
      psd1: "",
      psd2: "",
    };
  },
  mounted(){

  },
  methods: {
    goBack() {
      this.$router.push("/login");
    },
    register() {
      if (this.uid == "" || this.psd1 == "" || this.psd1 !== this.psd2) {
        alert("请输入正确的信息！");
        return;
      }
      this.$axios("/hello").then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
#login {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main {
  width: 17rem;
  height: 18rem;
  background-color: #e5d8e1;
  opacity: 0.8;
  border-radius: 6px;
  box-shadow: 2px 2px 2px gray;
  display: flex;
  flex-direction: column;
  align-items: center;
  .label {
    width: 80%;
    color: #585858;
    margin-top: 2rem;
    font-size: 0.8rem;
  }
  .input,
  .button {
    width: 80%;
    height: 1.9rem;
    border-radius: 5px;
    margin-top: 1.1rem;
  }
  input::placeholder {
    font-size: 0.8rem;
  }
  .button {
    display: flex;
    justify-content: space-between;
    .back,
    .register {
      height: 100%;
      width: 48%;
      background-color: white;
      color: #0396db;
      cursor: pointer;
      position: relative;
      border-radius: 5px;
      &:hover {
        top: 1px;
        left: 1px;
      }
    }
    .register {
      background-color: #0396db;
      color: white;
    }
  }
}
</style>